<template>
    <div>
        <el-card shadow="always">
            <el-form ref="management" :inline="true" size="small" style="display:flex;justify-content: space-between">
            <el-form-item>
                <el-input placeholder="请输入内容" suffix-icon="el-icon-search"></el-input>

            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd">订阅</el-button>
            </el-form-item>


        </el-form>
            <el-table
                :data="tableData1.filter(data => !search || data.orgName.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
                <el-table-column prop="orgName" label="机构名称"></el-table-column>
                <el-table-column prop="orgCode" label="机构编码"></el-table-column>
                <el-table-column prop="orgUser" label="机构账户"></el-table-column>
                <el-table-column prop="orgAddress" label="机构地址"></el-table-column>
                <el-table-column prop="userNum" label="用户个数"></el-table-column>
                <el-table-column align="center" label="操作" width="210%">
                    <!-- <template slot="header" slot-scope="scope">
                        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    </template> -->
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        <el-button size="mini" @click="detail(scope.$index, scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block">
                <el-pagination v-show="total > 0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :page-sizes="[2, 3, 4]" layout="total, sizes, prev, pager, next, jumper" :total="total" background
                    :current-page.sync="queryParams.currentPage" :page-size.sync="queryParams.pageSize" />
            </div>
            <!-- 新增对话框 -->
            <el-dialog title="新增机构" :visible.sync="openAdd" center>
                <el-form :model="form" ref="form" :rules="rules" label-position="left">
                    <el-form-item label="机构名称" prop="orgName" :label-width="formLabelWidth">
                        <el-select v-model="form.orgName" placeholder="请选择机构名称">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机构编码" prop="orgCode" :label-width="formLabelWidth">
                        <el-input v-model="form.orgCode"></el-input>
                    </el-form-item>
                    <el-form-item label="机构账户" prop="orgUser" :label-width="formLabelWidth">
                        <el-input v-model="form.orgUser"></el-input>
                    </el-form-item>
                    <el-form-item label="机构地址" prop="orgAddress" :label-width="formLabelWidth">
                        <el-input v-model="form.orgAddress"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" :label-width="formLabelWidth">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 修改对话框 -->
            <el-dialog title="修改机构" :visible.sync="openEdit" center>
                <el-form :model="form" ref="form" :rules="rules" label-position="left">
                    <el-form-item label="机构名称" prop="orgName" :label-width="formLabelWidth">
                        <el-select v-model="form.orgName" placeholder="请选择机构名称">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="机构编码" prop="orgCode" :label-width="formLabelWidth">
                        <el-input v-model="form.orgCode" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="机构账户" prop="orgUser" :label-width="formLabelWidth">
                        <el-input v-model="form.orgUser"></el-input>
                    </el-form-item>
                    <el-form-item label="机构地址" prop="orgAddress" :label-width="formLabelWidth">
                        <el-input v-model="form.orgAddress"></el-input>
                    </el-form-item>
                    <el-form-item label="用户个数" prop="userNum" :label-width="formLabelWidth">
                        <el-input v-model="form.userNum" disabled></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer" :label-width="formLabelWidth">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>

            <!-- 详情对话框 -->
            <el-dialog title="机构详情" :visible.sync="openDetail" center>
                <el-descriptions :column="2">
                    <el-descriptions-item label="机构名称">{{ form.orgName }}</el-descriptions-item>
                    <el-descriptions-item label="机构编码">{{ form.orgCode }}</el-descriptions-item>
                    <el-descriptions-item label="机构账户">{{ form.orgUser }}</el-descriptions-item>
                    <el-descriptions-item label="机构地址">{{ form.orgAddress }}</el-descriptions-item>
                    <el-descriptions-item label="用户个数">{{ form.userNum }}</el-descriptions-item>
                </el-descriptions>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'orgManagement',
    data() {
        return {
            tableData1: [{
                orgName: '11',
                orgCode:123193,
                orgUser: '11',
                orgAddress: '11',
                userNum: '1',
            },],
            keyWord: '',
            search:'',
            total: 1,
            queryParams: {//分页参数
                pageSize: 2,
                currentPage: 1,
            },
            openAdd: false,//新增对话框,
            openEdit: false,//修改对话框
            openDetail: false,//详情对话框
            form: {
                orgName: '11',
                orgCode:123193,
                orgUser: '11',
                orgAddress: '11',
                userNum: '1',
            },
            formLabelWidth: '120px',
            rules: {
                orgName: [
                    { required: true, message: "机构名称不能为空", trigger: "blur" }
                ],
                orgCode: [
                    { required: true, message: "机构编码不能为空", trigger: "blur" }
                ],
                orgUser: [
                    { required: true, message: "机构账户不能为空", trigger: "blur" }
                ],
                orgAddress: [
                    { required: true, message: "机构地址不能为空", trigger: "blur" }
                ],
            }
        }
    },
    methods: {
        reset() {
            this.form = {}
        },
        cancel() {
            this.reset()
            this.openAdd = false
            this.openEdit = false
        },
        handleAdd() {
            this.$refs['form']?.clearValidate()                                                                                                                                           
            this.reset()
            this.openAdd = true
        },
        handleEdit(index, row) {
            this.form = { ...row }
            this.openEdit = true
        },
        detail(index, row) {
            this.form = { ...row }
            this.openDetail = true
        },
        handleDelete(index, row) {
            this.tableData.splice(index, 1)
        },
        submitForm() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    alert('submit!');
                    this.openAdd = false
                    this.openEdit = false
                    this.reset()
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
    }
}
</script>
<style scoped lang="scss">

/* 卡片样式 */
.el-card {
    width: 98%;
    margin: 10px auto;
}

.header {
    height: 80px;
    line-height: 80px;
    position: relative;
}


.header .el-button {
    margin-left: 89%;
}


/* 分页器样式 */
.block {
    margin: 20px 0 0 60%;
}
</style>
